//
//** DataTables Plugin Customization
//
//== Mixins
@mixin m-build-plugin--datatables-base() {
    //== Pagination colors
    $page-size: 2.25rem;
    .dataTables_wrapper {
        padding: 0 !important; //== Table
        .dataTable {
            width: 100% !important;
            border-collapse: initial !important;
            border-spacing: 0 !important;
            margin: 1rem 0 !important; //== General
            th,
            td {
                vertical-align: middle; //== Row checkbox
                .m-checkbox {
                    margin-top: 0.3rem;
                    margin-bottom: 0;
                } //== Cell alignments
                &.dt-center {
                    text-align: center;
                }
                &.dt-left {
                    text-align: left;
                }
                &.dt-right {
                    text-align: right;
                }
            } //== Filter 
            .filter {
                th,
                td {
                    vertical-align: top;
                    .input-group+.input-group {
                        margin-top: 0.5rem;
                    }
                    .btn+.btn {
                        margin-top: 0.5rem;
                    }
                }
            } //== Group
            .group {
                th,
                td {
                    font-size: get-font-size(regular, '+');
                    font-weight: get-font-weight(bolder);
                }
            }
        } //== Scrollable
        .dataTables_scroll {
            margin: 1rem 0 !important;
            .dataTable {
                margin: 0 !important;
            }
        } //== Pagination
        .dataTables_paginate {
            .pagination {
                .page-item {
                    margin-left: 0.4rem;
                    >.page-link {
                        @include rounded {
                            @include border-radius(50%);
                        }
                        cursor: pointer;
                        display: inline-block;
                        @include vertical-horizontal-center-flexbox();
                        height: $page-size;
                        min-width: $page-size;
                        vertical-align: middle;
                        padding: 0.5rem;
                        text-align: center;
                        position: relative;
                        font-size: 1rem;
                        line-height: 1rem;
                        font-weight: get-font-weight(bold);
                        >i {
                            font-size: 1rem;
                            text-align: center;
                            display: inline-block;
                        }
                    }
                }
            }
        } //== Filter 
        .text-right,
        .text-left {
            .dataTables_filter {
                display: inline-block;
            }
        } //== Info
        .dataTables_info {
            padding-top: 0.45rem;
        } //== Custom pager
        .dataTables_pager {
            text-align: right; //== Length 
            .dataTables_length {
                margin-right: 0.5rem;
                display: inline-block;
                &+.dataTables_paginate {
                    margin-left: 1rem;
                }
            } //== Info
            .dataTables_info {
                display: inline-block;
                margin-right: 0.5rem;
            } //== Pagination
            .dataTables_paginate {
                display: inline-block;
            }
        }
        @include tablet-and-mobile {
            .dataTables_pager {
                margin-top: 1rem;
                text-align: center;
            }
        }
        @include mobile {
            .dataTables_paginate {
                margin-left: 0 !important;
                .pagination .page-item:first-child {
                    margin-left: 0 !important;
                }
            }
            .dataTables_paginate {
                .pagination {
                    @include flexbox-justify-content(center !important);
                }
            }
        } //== Responsive mode toggle icon
        table.dataTable.dtr-inline.collapsed>tbody> {
            tr[role="row"]>td:first-child:before {
                @include shadow(none);
                @include border-radius(0);
                top: 50%;
                left: 8px;
                height: 18px;
                width: 18px;
                margin-top: -9px;
                font-size: 18px;
                color: get-brand-color();
                border: 0;
                background-color: transparent;
                @include la-icon-self('\f2c3');
            }
            tr.parent>td:first-child:before {
                @include la-icon-self('\f28f');
                color: get-brand-color();
                background-color: transparent;
            }
        } //== Responsive mode row expand details 
        .child {
            .dtr-details {
                display: table !important;
                >li {
                    display: table-row !important;
                    border: 0 !important;
                    .dtr-title {
                        display: table-cell;
                        vertical-align: top;
                        border-bottom: 1px dashed #efefef;
                        font-weight: get-font-weight(bolder);
                        padding: 0.5rem 2rem 0.5rem 0;
                        &:after {
                            content: ':';
                        }
                    }
                    .dtr-data {
                        display: table-cell;
                        vertical-align: top;
                        border-bottom: 1px dashed #efefef;
                        padding: 0.5rem 0;
                    }
                    &:last-child {
                        .dtr-title {
                            border-bottom: 0;
                        }
                        .dtr-data {
                            border-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}

@mixin m-build-plugin--datatables-skin() {
    $skin: get-default-skin(); //== Pagination colors
    $base_color: #f4f3f8;
    $page-default: darken($base-color, 3%);
    $page-default-font: get-color($skin, regular, '---');
    $page-hover: get-brand-color();
    $page-hover-font: get-brand-inverse-color();
    $page-active: get-brand-color();
    $page-active-font: get-brand-inverse-color();
    .dataTables_wrapper {
        //== Table
        .dataTable {
            //== General
            th,
            td {
                color: get-font-color(light, regular, '+');
            } //== Row selected
            .selected {
                th,
                td {
                    background-color: get-color(light, panel, '+');
                    color: get-color(light, regular, '+');
                }
            } //== Group
            .group {
                th,
                td {
                    background-color: get-color(light, panel, '-');
                }
            }
        } //== Pagination
        .pagination {
            .page-item {
                >.page-link {
                    color: $page-default-font;
                    border: 0;
                }
                &.previous,
                &.next,
                &.last,
                &.first {
                    >.page-link {
                        background: $page-default;
                        &:hover {
                            background: $page-hover;
                            color: $page-hover-font;
                        }
                    }
                }
                &.active {
                    >.page-link {
                        background: $page-active;
                        color: $page-active-font;
                    }
                }
                &:hover {
                    >.page-link {
                        background: $page-hover;
                        color: $page-hover-font;
                    }
                }
                &.disabled,
                &.disabled:hover {
                    >.page-link {
                        @include opacity(0.6);
                    }
                }
            }
        }
    }
}

//== Build
@include m-build-plugin--datatables-base();
@include m-build-plugin--datatables-skin();